<!-- TeamDivision.vue -->
<template>
    <div class="team">
      <h2>👥 团队分工</h2>
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>成员</th>
              <th>分工</th>
              <th>负责模块</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(member, index) in members" :key="index">
              <td>{{ member.name }}</td>
              <td>{{ member.role }}</td>
              <td>{{ member.modules.join('、') }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
  
  <script setup>
  import { reactive } from 'vue'
  
  const members = reactive([
    {
      name: '谭冬',
      role: '前端开发',
      modules: ['课程展示模块', '用户交互设计', 'API对接']
    },
    {
      name: '李好',
      role: '后端开发',
      modules: ['微服务架构', '数据库设计', '接口开发']
    },
    {
      name: '肖劲豪',
      role: '测试运维',
      modules: ['单元测试', '系统部署', '性能优化']
    }
  ])
  </script>
  
  <style scoped>
  .team {
    margin-top: 2rem;
  }
  
  h2 {
    color: #2c3e50;
    border-bottom: 2px solid #42b983;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
  }
  
  .table-container {
    overflow-x: auto;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  th, td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e8e8e8;
  }
  
  th {
    background-color: #f8f9fa;
    font-weight: 600;
  }
  
  tr:hover {
    background-color: #f3f4f6;
  }
  
  @media (max-width: 768px) {
    th, td {
      padding: 0.8rem;
    }
  }
  </style>